<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="../../commons/import_taglibs.jsp" %>
<style>
    #dataTables-example {
        table-layout: fixed;
        width: 100%;
    }

    .nowrap {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }
</style>
<script>
    /**
     * 删除项目
     * @param _projectId
     */
    function delProject(_projectId) {
        //询问框
        layer.confirm('确定要删除该项目？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.post("/deploy/project/delete/" + _projectId, function (data) {
                layer.msg(data.message, {
                    shade: [0.3, '#000'],
                    icon: (data.success ? 1 : 2)
                }, function () {
                    if (data.success) {
                        $('#page-wrapper').load('/deploy/project/list');
                    }
                });
            });
        });
    }

    function edtProject(_projectId) {
        $('#page-wrapper').load('/deploy/project/load?id=' + _projectId);
    }

    $(function () {
        $(".nowrap").mouseover(function () {
            var that = $(this);
            layer.tips("点击查看详情！", that, {
                tips: [1, '#3595CC'],
                width: 500
            });
        });
        $(".nowrap").mouseout(function () {
            layer.closeAll('tips');
        });

        $(".nowrap").click(function () {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 1,
                shadeClose: true,
                closeBtn: false,
                content: '<div class="col-lg-12" style="padding: 20px;">' + $(this).html() + '</div>'
            });
        });
    });
</script>
<div class="panel panel-default">
    <div class="panel-heading"><b>项目列表</b></div>
    <!-- /.panel-heading -->
    <div class="panel-body">

        <!-- /.table-responsive -->
        <div class="well">
            <p>项目列表查询功能，敬请期待…</p>
            <button type="button" class="btn btn-info" onclick="edtProject('')">新增</button>
        </div>

        <div class="dataTable_wrapper">
            <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                <colgroup>
                    <col width="5%"/>
                    <col width="20%"/>
                    <col width="20%"/>
                    <col width="25%"/>
                    <col width="5%"/>
                    <col width="15%"/>
                </colgroup>
                <thead>
                <tr>
                    <th style="text-align: center; ">启用</th>
                    <th style="text-align: center; ">项目名称</th>
                    <th style="text-align: center; ">服务器路径</th>
                    <th style="text-align: center; ">备注</th>
                    <th style="text-align: center; ">排序</th>
                    <th style="text-align: center; ">&nbsp;</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${projectList}" var="project">
                    <tr class="gradeU">
                        <td align="center">${project.inUse ? "是" : "否"}</td>
                        <td>${project.name}</td>
                        <td>${project.path}</td>
                        <td class="nowrap">${project.desc}</td>
                        <td align="center">${project.sort}</td>
                        <td align="center">
                            <button type="button" class="btn btn-info" onclick="edtProject(${project.id})">编辑</button>
                            <button type="button" class="btn btn-danger" onclick="delProject(${project.id})">删除</button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>